<template>
  <publicBgPage>
    <div class="login" slot>
      <div class="backAccountAndCodeLogin" v-if="defaultSelect === 'qgCode'">
        <!-- <div class="backLogin" @click="changeBackLogin">返回登录</div>
        <div class="linear" /> -->
        <div class="backAccountLogin" @click="changeBackLogin">
          返回账号登录
          <img :src="require('@/assets/images/goRegisterIcon.png')" class="goIcon" />
        </div>
      </div>
      <!-- 扫码登录 无此功能 -->
      <!-- <div class="smallQgCodeBox" v-if="defaultSelect !== 'qgCode'">
        <img
          :src="require('@/assets/images/smallcode.png')"
          class="qgCodeIcon"
          @click="handelChangeLogin('qgCode')"
        />
      </div> -->
      <div class="loginMain">
        <div class="qgCodeLoginBox" v-if="defaultSelect === 'qgCode'">
          <div class="qgCodeLogin" :class="{ 'changeLogin-acitve': defaultSelect === 'qgCode' }">
            扫码登录
          </div>
        </div>
        <div class="changeLogin" v-else>
          <div class="accountLogin" :class="{ 'changeLogin-acitve': defaultSelect === 'accountLogin' }"
            @click="handelChangeLogin('accountLogin')">
            账号登录
          </div>
          <div class="codeLogin" :class="{ 'changeLogin-acitve': defaultSelect === 'codeLogin' }"
            @click="handelChangeLogin('codeLogin')">
            验证码登录
          </div>
        </div>
        <!-- 二维码登录 -->
        <div v-if="defaultSelect === 'qgCode'" class="qgCodeBox">
          <img :src="require('@/assets/images/qrcode.png')" />
          <div class="refreshQgCode">
            请使用微信扫描二维码登录
            <span class="refreshBtn" @click="handelRefreshQgCode">刷新</span>
          </div>
        </div>
        <!-- 账号登录 -->
        <div v-show="defaultSelect === 'accountLogin'" class="accountLoginBox">
          <AccountLoginForm />
        </div>
        <!-- 验证码登录 -->
        <div v-show="defaultSelect === 'codeLogin'" class="codeLoginBox">
          <CodeLoginForm />
        </div>
      </div>
      <div class="otherLogin">
        <div class="toRegisterBox">
          <div class="title">还没有账号：</div>
          <div class="goRegister" @click.stop="handelGoRegister">
            立即注册
            <img :src="require('@/assets/images/goRegisterIcon.png')" class="goRegisterIcon" />
          </div>
        </div>
        <div class="otherLoginBox">
          <!-- <div class="title">使用以下账号直接登录：</div>
          <div class="loginIconBox">
            <img
              :src="require('@/assets/images/vue.jpg')"
              class="otherLoginIcon"
            />
            <img
              :src="require('@/assets/images/vue.jpg')"
              class="otherLoginIcon"
            />
            <img
              :src="require('@/assets/images/vue.jpg')"
              class="otherLoginIcon"
            />
            <img
              :src="require('@/assets/images/vue.jpg')"
              class="otherLoginIcon"
            />
          </div> -->
          <div class="privacyPolicy">
            登录即同意
            <div @click.stop="showPrivacyPolicy = true">《隐私政策》</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="《隐私政策》" top="4vh" :visible.sync="showPrivacyPolicy" width="50vw" custom-class="showPrivacyPolicy">
      <p>
        数字化成长空间网站codelover.club（以下简称“数字化成长空间”）尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，数字化成长空间会按照本隐私权政策的规定使用和披露您的个人信息。但数字化成长空间将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，数字化成长空间不会将这些信息对外披露或向第三方提供。数字化成长空间会不时更新本隐私权政策。
        您在同意数字化成长空间服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于数字化成长空间服务使用协议不可分割的一部分。
      </p>
      <br />
      <p>1. 适用范围</p>
      <p>(a)在您注册数字化成长空间帐号时，您根据数字化成长空间要求提供的个人注册信息；</p>
      <p>
        (b)在您使用数字化成长空间网络服务，或访问数字化成长空间平台网页时，数字化成长空间自动接收并记录的您的浏览器和计算机上的信息，包括但不限于您的IP地址、浏览器的类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据；
      </p>
      <p>(c) 数字化成长空间通过合法途径从商业伙伴处取得的用户个人数据。</p>
      <br />
      <p>您了解并同意，以下信息不适用本隐私权政策：</p>
      <p>(a)您在使用数字化成长空间平台提供的搜索服务时输入的关键字信息；</p>
      <p>
        (b)数字化成长空间收集到的您在数字化成长空间发布的有关信息数据，包括但不限于参与活动、成交信息及评价详情；
      </p>
      <p>(c) 违反法律规定或违反数字化成长空间规则行为及数字化成长空间已对您采取的措施。</p>
      <br />
      <p>2.信息使用</p>
      <p>
        (a)数字化成长空间不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和数字化成长空间（含数字化成长空间关联公司）单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。
      </p>
      <p>
        (b)数字化成长空间亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何数字化成长空间平台用户如从事上述活动，一经发现，数字化成长空间有权立即终止与该用户的服务协议。
      </p>
      <p>
        (c)为服务用户的目的，数字化成长空间可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出产品和服务信息，或者与数字化成长空间合作伙伴共享信息以便他们向您发送有关其产品和服务的信息（后者需要您的事先同意）。
      </p>
      <br />
      <p>3. 信息披露</p>
      <p>
        在如下情况下，数字化成长空间将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：
      </p>
      <p>(a)经您事先同意，向第三方披露；</p>
      <p>(b)为提供您所要求的产品和服务，而必须和第三方分享您的个人信息；</p>
      <p>
        (c)根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；
      </p>
      <p>
        (d)如您出现违反中国有关法律、法规或者数字化成长空间服务协议或相关规则的情况，需要向第三方披露；
      </p>
      <p>
        (e)如您是适格的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷；
      </p>
      <p>
        (f)在数字化成长空间平台上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，数字化成长空间有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成或纠纷的解决。
      </p>
      <p>(g)其它数字化成长空间根据法律、法规或者网站政策认为合适的披露。</p>
      <br />
      <p>4.信息存储和交换</p>
      <p>
        数字化成长空间收集的有关您的信息和资料将保存在数字化成长空间及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或数字化成长空间收集信息和资料所在地的境外并在境外被访问、存储和展示。
      </p>
      <br />
      <p>5.Cookie的使用</p>
      <p>
        (a)在您未拒绝接受cookies的情况下，数字化成长空间会在您的计算机上设定或取用cookies，以便您能登录或使用依赖于cookies的数字化成长空间平台服务或功能。数字化成长空间使用cookies可为您提供更加周到的个性化服务，包括推广服务。
      </p>
      <p>
        (b)您有权选择接受或拒绝接受cookies。您可以通过修改浏览器设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies，则您可能无法登录或使用依赖于cookies的数字化成长空间网络服务或功能。
      </p>
      <p>(c)通过数字化成长空间所设cookies所取得的有关信息，将适用本政策。</p>
      <br />
      <p>6.信息安全</p>
      <p>
        (a)数字化成长空间帐号均有安全保护功能，请妥善保管您的用户名及密码信息。数字化成长空间将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在“完善的安全措施”。
      </p>
      <p>
        (b)在使用数字化成长空间网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对
      </p>
      <br />
      <p>7.本隐私政策的更改</p>
      <p>
        (a)如果决定更改隐私政策，我们会在本政策中、本公司网站中以及我们认为适当的位置发布这些更改，以便您了解我们如何收集、使用您的个人信息，哪些人可以访问这些信息，以及在什么情况下我们会透露这些信息。
      </p>
      <p>
        (b)本公司保留随时修改本政策的权利，因此请经常查看。如对本政策作出重大更改，本公司会通过网站通知的形式告知。为防止向第三方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是数字化成长空间用户名及密码发生泄露，请您立即联络数字化成长空间客服，以便数字化成长空间采取相应措施。
      </p>
      <br />
      <p>8.联系方式</p>
      <p>
        有关您的个人可识别信息或本隐私政策的所有要求、问题及担忧，请通过以下方式发送邮件或电邮联系我们：
      </p>
      <p>地址：佛山市顺德区顺德职业技术学院智能制造学院3b605</p>
      <p>电子邮箱：104375794@qq.com</p>
      <p>
        <router-link :to="{ name: 'Contact' }" style="color: #606266; cursor: pointer">联系我们</router-link>
      </p>
    </el-dialog>
  </publicBgPage>
</template>

<script>
import publicBgPage from "@/components/publicBgPage/publicBgPage";
import AccountLoginForm from "./accountLogin";
import CodeLoginForm from "./codeLogin";
import { login, logout } from "@/request/user";
export default {
  components: {
    publicBgPage,
    AccountLoginForm,
    CodeLoginForm,
  },
  data() {
    return {
      defaultSelect: "accountLogin",
      showPrivacyPolicy: false,
      // // 账号登录参数
      // accountLogin: {
      //   account: "",
      //   password: "",
      // },
      // // 验证码登录参数
      // codeLogin: {
      //   account: "",
      //   code: "",
      // },
      // // 账号登录输入验证
      // accountLoginRules: {
      //   account: [
      //     {
      //       required: true,
      //       message: "请输入正确的邮箱地址",
      //       trigger: "blur",
      //     },
      //   ],
      //   password: [
      //     {
      //       required: true,
      //       message: "请输入密码",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      // // 验证码登录验证
      // codeLoginRules: {
      //   account: [
      //     {
      //       required: true,
      //       message: "请输入正确的邮箱地址",
      //       trigger: "blur",
      //     },
      //   ],
      //   password: [
      //     {
      //       required: true,
      //       message: "验证码不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      // load: false,
      // loging: false, // 防止控制多次请求
    };
  },
  created() {
    this.load = false;
  },
  methods: {
    // 切换登录
    handelChangeLogin(string) {
      this.defaultSelect = string;
    },
    // 刷新二维码
    handelRefreshQgCode() {
    },
    // 切换到账号登录
    changeBackLogin() {
      this.defaultSelect = "accountLogin";
    },
    // 跳转注册
    handelGoRegister() {
      this.$router.push({ name: "Register", params: this.$route.params });
    },
    //   // 按下回车键
    //   handelEnterKey() {
    //     this.handelLogin();
    //   },
    //   // 请求登录接口
    //   handelLogin() {
    //     if (this.defaultSelect === "accountLogin") {
    //       this.verificationValue("accountLogin");
    //       return;
    //     }
    //     // 如果正在登录中 终止此次登录
    //     if (this.loging) return;
    //     const params = { userName: this.account, password: this.password };
    //     if (this.account == "" || this.password == "") {
    //       this.$message({
    //         message: "用户名或密码不能为空",
    //         type: "warning",
    //       });
    //       return;
    //     }
    //     this.load = true;
    //     this.loging = true;
    //     // login(params)
    //     //   .then((res) => {
    //     //     this.load = false;
    //     //     if (res.errno === 0) {
    //     //       this.$message({
    //     //         message: "登录成功",
    //     //         type: "success",
    //     //       });
    //     //       this.$store.dispatch("courses/fetchChooseCourses");
    //     //       this.$store.commit("user/changeUserInfo", {
    //     //         name: params.userName,
    //     //         token: true,
    //     //       });
    //     //       this.$store.commit("user/setUserinfolocaStorage", {
    //     //         name: params.userName,
    //     //         token: true,
    //     //       });
    //     //       const routerParams = this.$route.params;
    //     //       if (routerParams.routeName || routerParams.query) {
    //     //         this.$router.push({
    //     //           name: routerParams.routeName,
    //     //           query: routerParams.query,
    //     //         });
    //     //       } else {
    //     //         this.$router.push({ name: "Home" });
    //     //       }
    //     //     } else {
    //     //       this.loging = false;
    //     //       this.$message({
    //     //         message: res.message,
    //     //         type: "error",
    //     //       });
    //     //     }
    //     //   })
    //     //   .catch((err) => {
    //     //     this.loging = false;
    //     //   });

    //     // this.$store.dispatch('user/Login', params)
    //   },
    //   // 登录前验证输入的内容
    //   verificationValue(formName) {
    //     this.$refs[formName].validate((valid) => {
    //       if (valid) {
    //         alert("submit!");
    //       } else {
    //         return false;
    //       }
    //     });
    //   },
  },
};
</script>

<style lang="stylus">
.login {
  padding: 68px 50px 0 54px;
  margin: 0 auto;
  position: relative;
  display: flex;
  width: 700px;
  height: 400px;
  background-color: #ffffff;
  border-radius: 5px;
  border: solid 1px #d9d7d7;

  .backAccountAndCodeLogin {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    align-items: center;
    font-family: Segoe UI;
    font-size: 14px;
    color: #0e79c0;

    .linear {
      margin: 0 13px;
      width: 1px;
      height: 16px;
      background: #0e79c0;
      opacity: 0.5;
    }

    .backLogin {
      cursor: pointer;
    }

    .backAccountLogin {
      z-index: 10;
      cursor: pointer;
      display: flex;
      align-items: center;

      .goIcon {
        margin-left: 10px;
        width: 15px;
        height: 15px;
      }
    }
  }

  .smallQgCodeBox {
    position: absolute;
    left: 2px;
    top: 2px;

    img {
      cursor: pointer;
      object-fit: cover;
      max-width: 73px;
      max-height: 71px;
    }
  }

  .loginMain {
    // padding: 30px 20px;
    width: 320px;
    margin-right: 50px;

    .qgCodeBox {
      margin-top: 41px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        // object-fit: cover;
        width: 180px;
        height: 180px;
      }

      .refreshQgCode {
        position: relative;
        margin-top: 22px;
        font-family: Segoe UI;
        font-size: 14px;
        color: #707070;

        .refreshBtn {
          cursor: pointer;
          opacity: 0.5;
          margin-left: 20px;
          position: absolute;
          right: -44px;
          width: auto;
          text-decoration: underline;
        }
      }
    }

    .qgCodeLoginBox {
      display: flex;
      justify-content: center;
      align-items: center;

      .qgCodeLogin {
        cursor: pointer;
        font-family: Segoe UI;
        font-size: 20px;
        color: #707070;
      }

      .changeLogin-acitve {
        position: relative;
        color: #0e79c0;
      }
    }

    .changeLogin {
      padding: 0 24px 0 46px;
      margin-bottom: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .accountLogin, .codeLogin {
        cursor: pointer;
        font-family: Segoe UI;
        font-weight: bold;
        font-size: 20px;
        color: #707070;
      }

      .changeLogin-acitve {
        position: relative;
        color: #0e79c0;
      }
    }

    .changeLogin-acitve:after {
      position: absolute;
      content: '';
      left: 50%;
      right: 50%;
      bottom: -4px;
      width: 20px;
      height: 4px;
      background: #0e79c0;
      border-radius: 8px;
      transform: translate(-50%, 0);
    }

    .inputBox {
      // padding: 10px 0;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .loginBtn {
      width: 320px;
      height: 48px;
      background-color: #0e79c0;
      border-radius: 25px;
    }
  }

  .otherLogin {
    padding-left: 56px;
    flex: 1;
    height: 275px;
    border-left: 1px dashed rgba(144, 144, 144, 0.5);
    // opacity: 0.5;
  }

  .el-form {
    .el-form-item {
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            background: #ececec;
            border-color: #ececec;
            font-family: Segoe UI;
            font-size: 14px;
            color: #707070;
          }

          .el-input__inner:focus {
            background: #fbf9b8;
          }
        }

        .haveValue {
          .el-input__inner {
            background: #fbf9b8;
          }
        }
      }
    }
  }

  .toRegisterBox {
    .title {
      margin-top: 73px;
      font-family: Segoe UI;
      font-size: 14px;
      color: #707070;
    }

    .goRegister {
      cursor: pointer;
      margin-top: 8px;
      display: inline-block;
      align-items: center;
      font-family: Segoe UI;
      line-height: 1;
      font-size: 20px;
      color: #0e79c0;

      .goRegisterIcon {
        vertical-align: top;
        margin-left: 12px;
        object-fit: cover;
        width: 20px;
        height: 20px;
      }
    }
  }

  .otherLoginBox {
    .title {
      margin-top: 36px;
      font-family: Segoe UI;
      font-size: 14px;
      color: #707070;
    }

    .loginIconBox {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .otherLoginIcon {
        cursor: pointer;
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
    }

    .privacyPolicy {
      margin-top: 10px;
      font-family: Segoe UI;
      font-size: 12px;
      color: #707070;

      div {
        cursor: pointer;
        display: inline;
        color: #0e79c0;
      }
    }
  }
}
</style>